<template>
	<joy-page class="joyPage" :fixed="true">
		<scroll-view scroll-x class="nav bg-white topnav" id="tab-bar"  :style="[{top:0 + 'px',background: '#F6F6F6'}]">
			<view class="cu-bar search bg-white">
				<view class="search-form radius">
							<view class="search-box">
								<text class="cuIcon-search"></text>
								<input v-model="info.search_key" class="search-input" @focus="InputFocus" @confirm="search" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索项目" confirm-type="search"></input>
							</view>
				    <view class="search-cancel" @tap="handleCancel()" v-if="showCancel">取消</view>
						</view>
			</view>
					<view class="flex text-center bg-white" v-if="!isFocus && !isSearch">
				<view class="cu-item flex-sub" v-for="(item,index) in items" :key="index" @tap="tabSelect" :data-id="item.name">
					<label :class="item.name==info.status?'text-black cur':''">{{item.label}}</label>
				</view>
			</view>
		</scroll-view>
		<!-- <cu-custom bgColor="bg-gradual-orange" :isBack="true"><block slot="backText"></block><block slot="content">项目管理</block></cu-custom> -->
		<scroll-view style="width:100%;position: absolute;top: 190rpx;bottom: 0;" scroll-y :scroll-top="scrollTop" @scroll="scrollTopFun"
		 :lower-threshold="50" :refresher-enabled="true" :refresher-threshold="100" :refresherTriggered="triggered"
		 @refresherpulling="onPulling" @refresherrefresh="onRefresh" @scrolltolower='loadMore'>
			<view id="list" class="bg-white">
				<view v-if="!isFocus" class="cu-card case"  v-for="(item, index) in list" :key='index' :class="index=== 0 ? 'first':''">
					<my-project-card :cardInfo="item" :nth="index+1"></my-project-card>
				</view>
			</view>
			<view class="search-no" v-if="isSearchNoResult">
				<image class="s-n-img" src="/static/img/search.png"></image>
				<view class="s-n-sorry">抱歉，没有发现相关的内容</view>
				<view class="s-n-tips">换个关键词试试吧</view>
			</view>
			<view class="search-lately" v-if="isFocus">
				<view class="s-l-title">最近搜索</view>
				<view class="s-l-items" >
					<view class="item" v-for="(item,index) in latelyArr" :key="index" @tap="handleLately(item)">{{item}}</view>
				</view>
			</view>
			<reach-bottom v-if="!isFocus" info="暂无项目～"></reach-bottom>
		</scroll-view>
	</joy-page>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import myProjectCard from "@/components/uni-card/myProjectCard.vue"
	export default {
		components: {
			myProjectCard
		},
		computed: {
			...mapState(['forcedLogin']),
			...mapGetters(['hasLogin'])
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				scrollComponents: '#tab-bar', // tab 容器 计算距离顶部距离使用
				scrollViewomponents: '#list', // 内容 容器 计算距离顶部距离使用
				scrollTop: 0, // scroll-view组件 距离顶部距离，点击tab时间置顶使用
				scrollLeft: 0,
				showComponent: false, // 是否显示
				top: 0, // 顶部监听事件使用
				triggered: false,
				banner: [],
				project: [],
				list: [],
				info: {
					curpage: 1,
					search_key: '',
					status: 1
				},
				totalPage: 1,
				isFocus: false,
				isSearch: false, 
				showCancel:false,
				searchArr:[],
				latelyArr:[],
				isSearchNoResult:false,
				items: [{
						name: 1,
						label: "待结算项目"
					},
					{
						name: 2,
						label: "已结算项目"
					}
				],
			}
		},
		async onLoad(query) {
			await this.$AppEntryController.main(query);
		},
		onShow(){
			if(this.hasLogin){
				this.$store.commit("changeIsMore", false);
				this.$store.commit("changeIsEnd", false);
				this.getList(true);
			}
		},
		methods: {
			tabSelect(e){
				this.$store.commit("changeIsMore", false);
				this.$store.commit("changeIsEnd", false);
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.info.status = e.currentTarget.dataset.id
				this.getList(true);
			},
			InputFocus(){
				this.isFocus = true
				this.latelyArr=uni.getStorageSync("searchArr")
				this.isSearchNoResult=false
				this.showCancel=true
			},
			InputBlur(){
				// this.isFocus = false
				this.isSearchNoResult=false
			},
			search(e){
				this.$store.commit("changeIsMore", false);
				this.$store.commit("changeIsEnd", false);
				this.isFocus=false
				this.info.search_key = e.detail.value
				console.log(this.info.search_key)
				this.setSearchToStorage()
				this.latelyArr=uni.getStorageSync("searchArr")
				if(this.info.search_key){
					this.isSearch = true
					this.getSearchList(true);
				} else {
					this.isSearch = false
					this.getList(true);
				}
			},
			//搜索历史
			handleLately(item){
                this.isFocus=false				
				this.info.search_key=item
				this.isSearch=true
				this.getSearchList(true)
			},
			//将搜索词存入到storage中
			setSearchToStorage(){
				let getSearchArr=uni.getStorageSync("searchArr")
				console.log(getSearchArr)
				if(getSearchArr && getSearchArr.length!==0){
					this.searchArr=getSearchArr
					if(this.info.search_key){
						this.searchArr.unshift(this.info.search_key)
					}
					if(this.searchArr.length>=8){
						let sliceArr=this.searchArr.slice(0,7)
						uni.setStorageSync("searchArr",[...new Set(sliceArr)])
					}else{
					   
						uni.setStorageSync("searchArr",[...new Set(this.searchArr)])
					}
				}else{
					if(this.info.search_key){
						this.searchArr.push(this.info.search_key)
						uni.setStorageSync("searchArr",this.searchArr)
					}
				}
			},
			onPulling(e) {
				this.triggered = true
			},
			onRefresh() {
				this.getList(true)
			},
			loadMore() {
				if (this.totalPage > this.info.curpage) {
					this.$store.commit("changeIsMore", true);
					this.$store.commit("changeIsEnd", false);
					this.info.curpage++
					this.getList();
				} else {
					this.$store.commit("changeIsEnd", true);
					this.$store.commit("changeIsMore", false);
				}
			},
			scrollTopFun(e) {
				this.top = e.detail.scrollTop;
				this.getScrollTop();
			},
			// 计算距离
			getScrollTop() {
				let view = uni.createSelectorQuery().select(this.scrollComponents);
				let scrollView = uni.createSelectorQuery().select(this.scrollViewomponents);
				view.boundingClientRect(data => {
					// data.top  tab节点离页面顶部的距离为;
					console.log(data.top)
					console.log(this.CustomBar)
					if (data.top <= this.CustomBar) {
						scrollView.boundingClientRect(scrollData => {
							// data.top  内容节点离页面顶部的距离为;
							if (scrollData.top >= 0) {
								this.showComponent = false;
							} else {
								this.showComponent = true;
							}
						}).exec();
					} else {
						this.showComponent = false;
					}
				}).exec();
			},
			//取消搜索
			handleCancel(){
				this.showCancel=false
				this.isFocus=false
				this.info.search_key=''
				this.getList(true)
				this.isSearch=false
				this.isSearchNoResult=false
			},
			async getSearchList(isRefresh) {
				if (isRefresh) {
					this.info.curpage = 1
					this.list = []
					this.triggered = false
				}
				let indexInfo = await this.$apis.searchMemberProject(this.info);
				this.totalPage = indexInfo.total_page
				this.list.push(...indexInfo.list);
				if (indexInfo.total_count === 0) {
					//显示暂无项目
					this.$store.commit("changeIsMore", false);
					this.$store.commit("changeIsEnd", false);
					this.$store.commit("changeIsEmpty", false);
					// this.isFocus=false
					this.isSearchNoResult=true
				} else {
					// this.isFocus=false
					this.isSearchNoResult=false
					this.$store.commit("changeIsEmpty", false);
				}
			},
			async getList(isRefresh) {
				if (isRefresh) {
					this.info.curpage = 1
					this.list = []
					this.triggered = false
				}
				let indexInfo = await this.$apis.getMemberProjectList(this.info);
				this.totalPage = indexInfo.total_page
				this.list.push(...indexInfo.list);
				if (indexInfo.total_count === 0) {
					this.$store.commit("changeIsEmpty", true);
				} else {
					this.$store.commit("changeIsEmpty", false);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		z-index: 100;
		margin-bottom: 0;

		.block {
			width: 100%;
			height: 24rpx;
			background: rgba(246, 246, 246, 1);
		}
	}
	.search-form{
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		background-color: #ffffff;
		.search-box{
			/* width: 610rpx;
			height: 68rpx; */
			flex-grow: 1;
			background-color: #f5f5f5;
			border-radius: 34rpx;
			.cuIcon-search{
			   position: absolute;
			   margin: 0;
			   left: 25rpx;
			}
			.search-input{
				width: 100%;
				padding: 0 0 0 69rpx;
			}
		}
		.search-cancel{
			padding-left:25rpx ;
		}
		
	}
    .search-no{
		width: 100%;
		margin-top: 114rpx;
		.s-n-img{
			display: block;
			width: 110rpx;
			height: 100rpx;
			margin: 0 auto;
		}
		.s-n-sorry{
			margin-top: 58rpx;
			width: 100%;
			font-size: 28rpx;
			color: #333333;
			text-align: center;
		}
		.s-n-tips{
			margin-top: 30rpx;
			width: 100%;
			font-size: 24rpx;
			color: #999999;
			text-align: center;
		}
	}
	.search-lately{
		width: 100%;
		padding: 0 34rpx;
		// margin-top: 50rpx;
		.s-l-title{
			font-size: 26rpx;
			color: #999999;
			text-align: left;
		}
		.s-l-items{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.item{
				height: 58rpx;
				padding: 0rpx 33rpx;
				background-color: #ffffff;
				text-align: center;
				line-height: 58rpx;
				color:#333333;
				font-size: 26rpx;
				margin: 35rpx 30rpx 0 0;
				border-radius: 29rpx;
			}
		}
	}
	.cu-card {
		margin: 20rpx 0;
	}

	// .cu-card.first{
	// 	 margin-top: 114rpx;
	// }
	.cu-card.article>.cu-item .title {
		font-size: 30rpx;
		margin-bottom: 20rpx;
		-webkit-line-clamp: 1;
	}

	.cu-card.article>.cu-item .cu-content .text-content {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(100, 100, 100, 1);
		margin: 0 0 17rpx;
		line-height: 33rpx;
		-webkit-line-clamp: 3;
	}

	.cu-card.article>.cu-item .cu-content image {
		width: 300rpx;
		height: 141rpx;
	}

	.cu-card.article>.cu-item .cu-content .time {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(178, 178, 178, 1);

		span {
			margin-right: 30rpx;
		}
	}

	.project {
		margin-bottom: 24rpx;
	}

	.title {
		display: flex;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(50, 50, 50, 1);
		line-height: 102rpx;
		background-color: #FFFFFF;
		padding: 4rpx 30rpx 0rpx;
		justify-content: space-between;

		.more {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 106, 0, 1);
		}
	}
</style>
